<!--
<template>
  <div id="app" style="overflow: hidden;">
    &lt;!&ndash; 头部 &ndash;&gt;
    <div class="header">
      &lt;!&ndash; logo &ndash;&gt;
      <div class="logo">
        <a href="#">
          <img src="../../assets/小红书log.png" alt="小红书" width="67" height="24">
        </a>
      </div>
      &lt;!&ndash; 搜索框 &ndash;&gt;
      <div class="header_search">
        <el-input placeholder="搜索小红书" v-model="key"  @keydown.enter.native="search_note">
          <el-button slot="append" icon="el-icon-search" @click="search_note"></el-button>
        </el-input>
      </div>
    </div>

    &lt;!&ndash; 主体 &ndash;&gt;
    <el-container class="container">
      &lt;!&ndash; 侧边 &ndash;&gt;
      <el-aside width="220px" >
        <el-menu
          class="aside_menu"
          default-active="/Red/userindex"
          :router="true">
          <el-menu-item index="/Red/userindex">
            <i class="el-icon-ship"></i>
            <span slot="title">发现</span>
          </el-menu-item>
          <el-menu-item index="/Red/PubNote">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">发布</span>
          </el-menu-item>
          &lt;!&ndash; 购物车 &ndash;&gt;
          <el-submenu index="/Red/Shop">
            <template slot="title">
              <i class="el-icon-shopping-bag-1"></i>
              <span>购物</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/Red/Shop/Goods">
                <i class="el-icon-s-goods"></i>
                <span slot="title">热门店铺</span>
              </el-menu-item>
              <el-menu-item index="/Red/Shop/ShopCar">
                <i class="el-icon-shopping-cart-1"></i>
                <span slot="title">购物小车</span>
              </el-menu-item>
              <el-menu-item index="/Red/Shop/Orders">
                <i class="el-icon-document"></i>
                <span slot="title">券包</span>
              </el-menu-item>
              &lt;!&ndash; <el-menu-item index="/Red/Shop/Settings">
                <i class="el-icon-setting"></i>
                <span slot="title">个人中心</span>
              </el-menu-item> &ndash;&gt;
            </el-menu-item-group>
          </el-submenu>
          &lt;!&ndash; <el-menu-item index="/Red/About">
            <el-avatar :src="user_image" size="medium"></el-avatar>
            <span slot="title"> &nbsp; 我</span>
          </el-menu-item> &ndash;&gt;
&lt;!&ndash;          <i class="el-icon-bell"></i>&ndash;&gt;
          <el-menu-item index="/Red/advice">
            <i class="el-icon-bell"></i>
            <span slot="title">通知</span>
          </el-menu-item>
          &lt;!&ndash; 我 &ndash;&gt;
          <el-submenu index="/Red/Mine">
            <template slot="title">
              <el-avatar :src="this.user.headphoto" size="medium"></el-avatar>
              <span slot="title"> &nbsp; 我</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/Red/Mine/Personal">
                <i class="el-icon-document"></i>
                <span slot="title">个人资料</span>
              </el-menu-item>
              <el-menu-item index="/Red/Mine/MyStore">
                <i class="el-icon-shopping-cart-2"></i>
                <span slot="title">我的店铺</span>
              </el-menu-item>
&lt;!&ndash;              <el-menu-item index="/Personal">&ndash;&gt;
&lt;!&ndash;                <i class="el-icon-document"></i>&ndash;&gt;
&lt;!&ndash;                <span slot="title">笔记管理</span>&ndash;&gt;
&lt;!&ndash;              </el-menu-item>&ndash;&gt;
              &lt;!&ndash; <el-menu-item index="/Red/Mine/Rebate">
                <i class="el-icon-setting"></i>
                <span slot="title">返利报表</span>
              </el-menu-item> &ndash;&gt;
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      &lt;!&ndash; 内容 &ndash;&gt;
      <el-main >
        <div class="main_router">

          &lt;!&ndash; 过渡效果 &ndash;&gt;
          <transition name="scale-slide" mode="in-out">
            <router-view ref="child"></router-view>
          </transition>

          &lt;!&ndash; 缩放过渡 &ndash;&gt;
          &lt;!&ndash; <router-view v-slot="{ Component }">
            <transition name="scale-slide">
              <component :is="Component" />
            </transition>
          </router-view> &ndash;&gt;


        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// 导入组件

export default {
  name: 'App',
  data() {
    return {
      user:{},
      key: '',

    }
  },
  created() {
    this.username=sessionStorage.getItem("username");
    this.uid=sessionStorage.getItem("uid");
    this.getUser()
    console.log(this.user);
  },
  methods: {
    getUser(){
      this.$axios.get('user/getOne?id='+this.uid).then(resp=>{
        this.user=resp.data

        console.log(this.user);
      })
    },
    search_note () {
      this.$refs.child.children_search_note(this.key);
    },
    goto_admin () {
      this.$router.push('/Admin');
    }
  },
}
</script>

<style lang="less">
#app {
  /* font-family: Avenir, Helvetica, Arial, sans-serif; */
  position: relative;
  height: 100%;
  width: 100%;
  background-color: hsla(0,0%,100%,.98);
  overflow: hidden;
}

// 头部
.header {
  width: 93%;
  height: 71px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  // border: 1px solid red;
  /* line-height: 71px; 不能加，不然搜索框会继承跳出div*/
  border-bottom-color: rgb(48, 52, 54);
  // border-bottom: 1px solid black;
  .logo {
    height: 100%;
    width: 67px;
    line-height: 71px;
    margin-left: 20px;
  }
  .header_search {
    width: 40%;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    .el-input__inner {
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
    }
    .el-input-group__append {
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
    }
  }
  .header_setting {
    width: 150px;
    height: 42px;
    line-height: 71px;
    position: absolute;
    top: 0;
    right: 10px;
    .el-input-group__append {
      border: none;
    }
  }
}
// 主体
.container {
  width: 93%;
  height: 95%;
  position: absolute;
  top: 71px;
  left: 50%;
  transform: translateX(-50%);
  // border: 1px solid red;
}
// 侧边栏
.aside_menu {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  overflow: hidden;

  .el-submenu__title {
    border-radius: 18px;
    margin-top: 1px;
  }

  .el-menu-item.is-active {
    color: rgb(255, 36, 66);
    background-color: rgb(255, 233, 236)!important;
    border-radius: 18px;
  }
  .el-menu-item {
    border-radius: 18px;
    margin-top: 1px;
  }
  border: none;
  padding-left: 6px;
}
.main_router {
  width: 100%;
  height: 100%;
  overflow: scroll;
}
.main_router::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}



// 过渡效果
.slide-enter-active, .slide-leave-active {
  transition: all 0.1s ease-out;
}


.slide-enter-to {
  position: absolute;
  right: 0;
}


.slide-enter-from {
  position: absolute;
  right: -100%;
}


.slide-leave-to {
  position: absolute;
  left: -100%;
}


.slide-leave-from {
  position: absolute;
  left: 0;
}

</style>
-->
